<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>09特效</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <script src="../../../js/jquery-2.1.1.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
</head>
<body>
<br>动画过渡（Transitions）:对应的插件文件“transition.js”
<br>模态弹窗（Modal）:对应的插件文件“modal.js”
<br>下拉菜单（Dropdown）：对应的插件文件“dropdown.js”
<br>滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”
<br>选项卡（Tab）：对应的插件文件“tab.js”
<br>提示框（Tooltips）：对应的插件文件“tooltop.js”
<br>弹出框（Popover）：对应的插件文件“popover.js”
<br>警告框（Alert）：对应的插件文件“alert.js”
<br>按钮（Buttons）：对应的插件文件“button.js”
<br>折叠/手风琴（Collapse）：对应的插件文件“collapse.js”
<br>图片轮播Carousel：对应的插件文件“carousel.js”
<br>自动定位浮标Affix：对应的插件文件“affix.js”

<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<br/>
<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
             模态弹出窗内容data-target
        </div>
    </div>
</div>
<br/><br/>
<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal1" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade"  id="mymodal1" >
    <div class="modal-dialog" >
        <div class="modal-content" >
            模态弹出窗内容href
        </div>
    </div>
</div>
<br/><br/>
<!-- 触发模态弹出窗元素 -->
<button class="btn btn-primary" type="button">点击我</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    $(function(){
        $(".btn").click(function(){
            $("#mymodal1").modal();
        });
    });
</script>
</body>
</html>